<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script></script>
<title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
    <table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
        <tr>
            <td colspan="2" style="padding:10px 20px; background-color:#acb3b9;">
                <h1 style="font-size:24px;">My Site</h1>
            </td>
        </tr>
        <tr style="height:170px;">
            <td style="width:20%; padding:20px; background-color:#d4d7dc; vertical-align: top;">
                <ul style="list-style:none; padding:0px; line-height:24px;">
                    <li><a href="#" style="color:#333;">Home</a></li>
                    <li><a href="#" style="color:#333;">About</a></li>
                    <li><a href="#" style="color:#333;">Contact</a></li>
                </ul>
            </td>
            <td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
                <h2>Welcome to our site</h2>
                <p>Here you will learn how to create websites...</p>
                <p>reference:<a href="https://echarts.apache.org/">echarts</a></p>
                <p>test
                    <table>
                        <li><a href="./react_test.html">react</a></li>
                        <li><a href="./data_visualize.html">data visuallize</a></li>
                        <li><a href="./app/account_book.html">account book</a></li>
                        <li><a href="./game/ball.html"></a></li>

                    </table>
                </p>
                
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding:5px; background-color:#acb3b9; text-align:center;">
                <p>copyright &copy; mysite.com</p>
            </td>
        </tr>
    </table>
</body>
</html>